<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.1.0.min.js"></script>
    <style type="text/css">
       .div1 *{
           display: block;
           border: 3px solid blue;
           color: blue;
           padding: 5px;
           margin: 15px;
       }
    </style>
</head>
<body>
   <div class="div1">
       <p>p</p>
       <h2>h2</h2>
       <h3>h3</h3>
       <h4>h4</h4>
       <h5>h5</h5>
       <h6>h6</h6>
   </div>

    <script>
        /*同级遍历的方法：
       siblings()：除了当前元素修改掉同级其他元素
       next()：对下一个元素有效
       nextAll()：对所有接下去的元素有效
       nextUntil()：下面元素区间修改从哪里到哪里
       prev()：
       preAll()
       preUntil()
       */
        $(document).ready(function(){
           /* $("h4").siblings().css({border:"3px solid red"})//除了h4修改掉同级其他元素*/
            $("h4").next().css({border:"3px solid red"})
            $("h4").nextUntil("h6").css({border:"3px solid red"})

         })
    </script>
</body>
</html>